<template>
  <div>
    <!-- 突然意识到这里用栅格更好，但是懒得改了，诶嘿 -->
    <el-card class="card">
      <el-form ref="ruleForm" :model="formInline" :rules="rules" label-width="100px" class="demo-ruleForm" :label-position="labelPosition">
        <!-- row1 -->
        <div style="display:flex; justify-content:space-between;">
          <el-form-item label="仓库编码">
            <el-input v-model="formInline.code" placeholder="ck023392" disabled class="width" />
          </el-form-item>
          <el-form-item label="仓库名称" prop="name">
            <el-input v-model="formInline.name" class="width" />
          </el-form-item>
          <el-form-item label="仓库类型" prop="type">
            <el-select v-model="formInline.type" placeholder="请选择" class="width">
              <el-option label="中转仓" value="ZZ" />
              <el-option label="加工仓" value="JG" />
              <el-option label="储备仓" value="CB" />
              <el-option label="冷藏仓" value="LC" />
            </el-select>
          </el-form-item>
        </div>

        <!-- row2 -->
        <div>
          <el-form-item label="省/市/区" prop="city">
            <el-cascader
              v-model="formInline.location"
              placeholder="省 / 市 / 区"
              style="width:66%"
              :options="options"
              @change="chge"
            />
          </el-form-item>
        </div>

        <!-- row3 -->
        <div style="display:flex; align-content:flex-start;">
          <el-form-item label="详细地址">
            <el-input v-model="formInline.address" placeholder="请输入" style="width:808px" />
          </el-form-item>
          <el-form-item label="仓库状态" prop="status" style="margin-left:30px;">
            <el-radio-group v-model="formInline.status">
              <el-radio label="1">启用</el-radio>
              <el-radio label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>

        <!-- row4 -->
        <div style="display:flex; justify-content:space-between;">
          <el-form-item label="仓库面积">
            <el-input v-model="formInline.num" placeholder="请输入" style="width:350px" />
            <div class="m³">m³</div>
          </el-form-item>
          <el-form-item label="负责人" prop="personName">
            <el-input v-model="formInline.personName" class="width" />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="formInline.phone" placeholder="请输入" class="width" />
          </el-form-item>
        </div>

        <!-- row5 -->
        <hr>
        <el-form-item>
          <el-button round>返回</el-button>
          <el-button type="warning" round @click="joinWarehouse()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { regionData } from 'element-china-area-data'
import { newWarehouse } from '@/api'

export default {
  data() {
    return {
      // 省市区默认显示
      selectedOptions: ['110000', '110100', '110105'],
      options: regionData,
      labelPosition: 'top',
      formInline: {
        address: '',
        area: '110103',
        city: '119900',
        code: 'CK025886',
        location: '北京市/市辖区/崇文区',
        name: '12341534',
        personName: '1234',
        phone: '',
        province: '110000',
        status: '1',
        surface: null,
        type: 'ZZ'
      },
      rules: {
        name: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        city: [
          { required: true }
        ],
        type: [
          { required: true }
        ],
        personName: [
          { required: true }
        ],
        status: [
          { required: true }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    chge() {
      console.log(this.electedOptions)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async joinWarehouse() {
      const res = await newWarehouse(this.formInline)
      console.log(res)
    }
  }
}
</script>
<style lang='scss' scoped>
.demo-ruleForm {
  margin-top: 10px;
}
.card {
  margin: 20px 30px 0 30px;
  border-radius: 12px;
}
.width {
  width: 390px !important;
}

.m³ {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  float:right;
  width: 40px;
  height: 40px;
  background-color: #e7dfdf;
}
</style>
